<template>
  <div class="notification">
    <sticky-header :top="120">
      <div class="head header sticky-header">
        <div class="head_left">
          <router-link :to="{name: 'inform-template-list', query: this.$route.query}">
            <el-button plain icon="el-icon-back" size="small" :round="true">
              返回
            </el-button>
          </router-link>
          <p class="title">{{ tagEmu[this.$route.query.tag] }}</p><span class="desc"></span>
        </div>
        <div class="button_list">
          <el-button type="primary" @click="handleSubmit('infoForm')" :loading="submitLoading">保存</el-button>
        </div>
      </div>
    </sticky-header>
    <div class="template" style="background: #fff">
      <el-row>
        <el-col :span="18">
          <div style="height: 600px;overflow-x: scroll;margin-bottom: 20px">
            <template1 :value="info" :tagName="tagName" v-if="info.emailModelStyle  === '1'"></template1>
            <template2 :value="info" :tagName="tagName" v-if="info.emailModelStyle  === '2'"></template2>
          </div>
          <el-form ref="infoForm" :model="info" :rules="rules" label-width="140px">
            <el-form-item label="模板名称" prop="emailModelName">
              <el-input v-model="info.emailModelName" placeholder="请输入模板名称" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="邮件店铺 icon" class="no-border pic">
              <ele-form-upload-plus-file v-model="info.emailModelIconUrl" title="图片"/>
              <b style="color: #80869e;font-size: 12px">店铺icon为邮件内显示的店铺图标，一般尺寸为50x50px</b>
            </el-form-item>
            <el-form-item label="邮件店铺名">
              <el-input style="position: fixed;bottom: -9999px"></el-input>
              <el-input v-model="info.emailModelSiteName" placeholder="请输入邮件店铺名。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="邮件标题" prop="emailModelTitle">
              <el-input v-model="info.emailModelTitle" placeholder="请输入邮件标题。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="邮件正文" prop="emailContentCode">
              <tinymce v-model="info.emailContentCode" :height="300" v-if="info.id"/>
            </el-form-item>
            <el-form-item label="邮件配图" class="no-border pic">
              <ele-form-upload-plus-file v-model="info.emailModelBackUrl" title="图片"/>
              <b style="color: #80869e;font-size: 12px">邮件配图为邮件内显示的图片，一般尺寸为440x230px</b>
            </el-form-item>
            <el-form-item label="按钮文案" prop="emailModelButtonMsg" v-if="this.$route.query.tag !== 'member_reset_password'">
              <el-input v-model="info.emailModelButtonMsg" placeholder="请输入按钮文案。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="按钮背景色" v-if="this.$route.query.tag !== 'member_reset_password'">
              <el-color-picker
                  v-model="info.emailModelButtonBackColor"
                  :predefine="predefineColors">
              </el-color-picker>
            </el-form-item>
            <el-form-item label="按钮文字颜色" v-if="this.$route.query.tag !== 'member_reset_password'">
              <el-color-picker
                  v-model="info.emailModelButtonMsgColor"
                  :predefine="predefineColors">
              </el-color-picker>
            </el-form-item>
            <el-form-item label="邮件跳转店铺链接">
              <el-input v-model="info.emailModelButtonUrl" placeholder="输入跳转链接。" auto-complete="off"
                        style="width: 400px"/>
              <p style="color: #80869e;font-size: 12px">默认跳转C端checkout页</p>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import template1 from './notification-template1';
import template2 from './notification-template2';
import Tinymce from '@/components/Tinymce';
import stickyHeader from '_c/StickyHeader';
import {getDetailEmailModels, updateEmailModels} from '@/api/inform';

export default {
    name: 'template-edit',
    components: {template1, template2, Tinymce, stickyHeader},
    data () {
        return {
            tagEmu: {
                order_confirm: '订单提交模板管理',
                order_send_goods: '发货通知模板管理',
                order_confirm_goods: '收货通知模板管理',
                member_reset_password: '重设会员密码模板管理',
                marketing_return: '放弃订单挽留模板管理',
                marketing_activity: '放弃订单挽留模板管理'
            },
            tagName: this.$route.query.tag,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            activeForm: 1,
            info: {},
            rules: {
                emailModelName: [
                    {required: true, message: '请输入模板名称', trigger: 'blur'}
                ],
                emailModelSiteName: [
                    {required: true, message: '请输入店铺名称', trigger: 'blur'}
                ],
                emailModelTitle: [
                    {required: true, message: '请输入邮件标题', trigger: 'blur'}
                ],
                emailContentCode: [
                    {required: true, message: '请输入邮件正文', trigger: 'blur'}
                ],
                emailModelButtonMsg: [
                    {required: true, message: '请输入按钮文案', trigger: 'blur'}
                ]
            },
            submitLoading: false
        };
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    mounted () {
        this.initData();
    },
    methods: {
        initData () {
            getDetailEmailModels(this.siteId, this.$route.params.id).then(res => {
                this.info = res.data;
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    updateEmailModels({
                        siteId: this.siteId,
                        modelId: this.$route.params.id,
                        emailType: this.$route.query.emailType,
                        emailTypeDetail: this.$route.query.noticeId,
                        ...this.info
                    }).then(res => {
                        this.$message.success('修改成功');
                        this.$router.push({name: 'inform-template-list', query: this.$route.query});
                    });
                }
            });
        },
        handleReset (name) {
            // this.$router.push({ name: 'site-list' });
        }
    }
};
</script>

<style scoped lang="scss">
.notification {
  .header {
    padding: 20px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.fixed{
      background: #fff;
    }

    .head_left {
      display: flex;
      align-items: center;
    }

    .title {
      margin-left: 6px;
    }
  }

  .template {
    padding-top: 20px;
  }

  .ant-radio-wrapper {
    width: 33.33%;
    margin-right: 0;

    .ant-radio {
      display: none;
    }

    .template_item {
      margin-bottom: 70px;
      margin-right: 5%;
      position: relative;
      border-radius: 8px 8px 0 0;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .title {
        font-size: 16px;
        color: #212121;
        margin-bottom: 10px;
      }

      .desc {
        font-size: 14px;
        color: #8c8c8c;
        line-height: 24px;
        margin-bottom: 15px;
        min-height: 48px;
      }

      .img_more {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 2px;
        min-width: 100%;
        padding-bottom: 76%;
        box-shadow: 0 0 5px #ddd;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: left top;
      }

      .button__wrap {
        display: none;
        width: 100%;
        position: absolute;
        top: 50%;
        justify-content: space-around;
      }

      &:hover .button__wrap {
        display: flex;
      }
    }

    &.ant-radio-wrapper-checked div[data-img] {
      border: 2px solid #2e60f9;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 2em solid #2e60f8;
        border-left: 2em solid transparent;
      }

      &:after {
        content: '';
        width: 0.6em;
        height: 0.9em;
        border-top: 0.15em solid transparent;
        border-left: 0.15em solid transparent;
        border-right: 0.15em solid #fff;
        border-bottom: 0.15em solid #fff;
        position: absolute;
        top: 0.1em;
        right: 0.25em;
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
      }
    }
  }
}
</style>
